/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-03-02 14:39:02
 * @LastEditTime : 2023-06-01 09:33:52
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\WeChatHomeSetUp.jsx
 * @Description  :
 */

import './Scss/WeChatHomeSetUp.scss'
import { useState } from 'react'
import { Collapse, Divider, Badge, Input, Switch, Select, Result, message } from 'antd'
import { SmileOutlined } from '@ant-design/icons'
import { useBoolean, useEventEmitter, useSetState, useRequest } from 'ahooks'
import { chunkArr, fillZero, colorCount } from '../../../Configure/Common'
import { SetUpCommonModal } from '../../../Configure/SetUpModal'
import { Http } from '../../../Api'
import {
    WeChatImageUrl,
    WeChaAntdThemeGroups,
    WeChaUIThemeGroups,
    WeChaChinaThemeGroups,
    WeChatAntdThemeList,
    WeChatUIThemeList,
    WeChatChinaThemeList,
    WeChatTabBarType,
    // WeChatTabBarList,
    WeChatCaptionList,
    SmallTitle001,
    SmallTitle002,
    MenuStyle001,
} from '../../../Configure/WeChatCommon'
import { useEffect } from 'react'

const SmallTitleList = {
    SmallTitle001,
    SmallTitle002,
}

const MenuStyleList = {
    MenuStyle001,
}

const { Panel } = Collapse
const { Ribbon } = Badge
// 小程序预览
const WeChatPreview = ({ data, post, uuid }) => {
    const {
        tabBarType,
        theme,
        MainTitle,
        SubTitle,
        Caption,
        preinstallTitle,
        preinstallEnglish,
        warningTitle,
        warningStatus,
        MenuList,
    } = data
    const background = WeChatAntdThemeList[theme] || WeChatUIThemeList[theme] || WeChatChinaThemeList[theme]
    const color = colorCount(background) + '%'
    const SubmitData = () =>
        post({ url: 'putSmallProgramConfig', data: { uuid, menus: JSON.stringify(data) }, path: [uuid] })
    return (
        <div className="WeChatPreview">
            <div className="WeChat">
                <div className="Top" style={{ background, '--hsl': color }}>
                    首页
                </div>
                <div className="Body">
                    <div className="TopClass" style={{ background }}>
                        <div className="TableName">
                            <div style={{ '--hsl': color }}>
                                <span>{MainTitle}</span>
                                <span>{SubTitle}</span>
                            </div>
                            <div>
                                <img src={WeChatImageUrl + WeChatCaptionList[Caption]} alt="" />
                            </div>
                        </div>
                        <div className="Options">
                            <div className="overview" style={{ background, '--hsl': color }}>
                                <img src={WeChatImageUrl + '概况.png'} alt="" />
                                <div>
                                    <div>{preinstallTitle}</div>
                                    <div>{preinstallEnglish}</div>
                                </div>
                            </div>
                            {warningStatus && (
                                <div className="warning">
                                    <div className="Number">9999</div>
                                    <img src={WeChatImageUrl + 'SOS.png'} alt="" />
                                    <div className="Title">{warningTitle}</div>
                                </div>
                            )}
                        </div>
                    </div>

                    <div className="MenuBox">
                        {MenuList.length === 0 ? (
                            <Result
                                icon={<SmileOutlined style={{ color: background }} />}
                                title="暂无内容,请添加菜单"
                            />
                        ) : (
                            MenuList.map((item, index) => (
                                <div className="MenuList" key={index}>
                                    {(() => {
                                        const {
                                            smallStatus,
                                            smallStyle,
                                            smallName,
                                            smallEnglish,
                                            smallTheme,
                                            menuStyle,
                                            menuArr,
                                        } = item
                                        const SmallTitle = SmallTitleList[smallStyle]
                                        const MenuStyle = MenuStyleList[menuStyle]

                                        return (
                                            <>
                                                {smallStatus && (
                                                    <SmallTitle
                                                        title={smallName}
                                                        english={smallEnglish}
                                                        status={smallTheme}
                                                        theme={background}
                                                    />
                                                )}
                                                <MenuStyle data={menuArr} />
                                            </>
                                        )
                                    })()}
                                </div>
                            ))
                        )}
                    </div>
                </div>
                <div className="TabBar">
                    {(() => {
                        const Template = WeChatTabBarType.find(v => v.uuid === tabBarType).DOM
                        return <Template theme={background} />
                    })()}
                </div>
            </div>

            <div className="WeChatSubmit" style={{ background, '--hsl': color }} onClick={SubmitData}>
                保存按钮
            </div>
        </div>
    )
}

const ThemeSetUp = ({ WeChatEvent, theme }) => {
    const [ThemeGroups] = useState([
        { uuid: '001', title: 'UI 配色', Groups: WeChaUIThemeGroups, List: WeChatUIThemeList },
        { uuid: '002', title: 'Antd 配色', Groups: WeChaAntdThemeGroups, List: WeChatAntdThemeList },
        { uuid: '003', title: 'China 配色', Groups: WeChaChinaThemeGroups, List: WeChatChinaThemeList },
    ])

    return (
        <div className="ThemeSetUp">
            {ThemeGroups.map(({ uuid, title, Groups, List }, index) => (
                <div className="Groups" key={uuid}>
                    <Divider className="Title">{title}</Divider>
                    <div className="Box">
                        {Groups.map(({ uuid, title, english, introduce }) => {
                            if (index === 0 || index === 2) {
                                const data = chunkArr(Object.keys(List), 10)

                                return data.map((item, key) => (
                                    <div key={key}>
                                        <div className="ColorTitle">
                                            <div>
                                                {english} / {title}
                                            </div>
                                            <div>{fillZero(key + 1)}</div>
                                        </div>
                                        <div className="ColorList">
                                            {item.map((value, num) => (
                                                <div
                                                    key={num}
                                                    className={value === theme ? 'active' : ''}
                                                    onClick={() => WeChatEvent.emit({ theme: value })}
                                                    style={{
                                                        '--background': List[value],
                                                        '--hsl': colorCount(List[value]) + '%',
                                                    }}
                                                >
                                                    <span>
                                                        {english} - {value}
                                                    </span>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))
                            } else {
                                return (
                                    <div key={uuid}>
                                        <div className="ColorTitle">
                                            <div>
                                                {english} / {title}
                                            </div>
                                            <div>{introduce}</div>
                                        </div>
                                        <div className="ColorList">
                                            {Object.keys(List)
                                                .filter(v => v.indexOf(title) !== -1)
                                                .map((item, index) => (
                                                    <div
                                                        key={index}
                                                        className={item === theme ? 'active' : ''}
                                                        onClick={() => WeChatEvent.emit({ theme: item })}
                                                        style={{
                                                            '--background': List[item],
                                                            '--hsl': colorCount(List[item]) + '%',
                                                        }}
                                                    >
                                                        <span>
                                                            {english} - {item}
                                                        </span>
                                                    </div>
                                                ))}
                                        </div>
                                    </div>
                                )
                            }
                        })}
                    </div>
                </div>
            ))}
        </div>
    )
}

const HeadSetUp = ({ WeChatEvent, data }) => {
    const {
        MainTitle,
        SubTitle,
        Caption,
        theme,
        preinstallTitle,
        preinstallEnglish,
        preinstallPath,
        warningTitle,
        warningStatus,
    } = data
    const background = WeChatAntdThemeList[theme] || WeChatUIThemeList[theme] || WeChatChinaThemeList[theme]

    const [ImageSelectStatus, { setTrue, setFalse }] = useBoolean(false)
    const [Title, setTitle] = useState()
    const [SelectData, setSelectData] = useState()

    const SetUpCommonModalEvent = useEventEmitter()
    SetUpCommonModalEvent.useSubscription(val => {
        WeChatEvent.emit(val)
    })

    return (
        <div className="HeadSetUp">
            <div>
                <Divider className="Title" orientation="left">
                    标题
                </Divider>
                <div className="Label">
                    <div>
                        <div>
                            <div>主标题 : </div>
                            <Input
                                size="large"
                                placeholder="请输入主标题"
                                value={MainTitle}
                                onChange={e => {
                                    WeChatEvent.emit({ MainTitle: e.target.value })
                                }}
                            />
                        </div>
                        <div>
                            <div>副标题 : </div>
                            <Input
                                size="large"
                                placeholder="请输入副标题"
                                value={SubTitle}
                                onChange={e => {
                                    WeChatEvent.emit({ SubTitle: e.target.value })
                                }}
                            />
                        </div>
                    </div>
                    <div>
                        <div>标题配图 : </div>
                        <img
                            onClick={() => {
                                setSelectData({
                                    type: 'ImageSelect',
                                    theme: background,
                                    url: WeChatImageUrl,
                                    list: WeChatCaptionList,
                                    active: Caption,
                                    key: 'Caption',
                                })
                                setTitle('标题配图选择')
                                setTrue()
                            }}
                            src={WeChatImageUrl + WeChatCaptionList[Caption]}
                            alt=""
                        />
                    </div>
                </div>
            </div>

            <div>
                <Divider className="Title" orientation="left">
                    预设按钮 & 告警按钮
                </Divider>
                <div className="Btn">
                    <div className="preinstall">
                        <div>
                            <div>
                                <div>预设按钮名称 : </div>
                                <Input
                                    placeholder="请输入按钮名称"
                                    value={preinstallTitle}
                                    onChange={e => {
                                        WeChatEvent.emit({ preinstallTitle: e.target.value })
                                    }}
                                />
                            </div>
                            <div>
                                <div>预设按钮English : </div>
                                <Input
                                    placeholder="请输入按钮English"
                                    value={preinstallEnglish}
                                    onChange={e => {
                                        WeChatEvent.emit({ preinstallEnglish: e.target.value })
                                    }}
                                />
                            </div>
                            <div>
                                <div>预设按钮Path : </div>
                                <Select
                                    style={{ width: 'calc(100% + 15px)' }}
                                    placeholder="请选择页面路径"
                                    value={preinstallPath}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="warning">
                        <div>
                            <div>
                                <div>告警按钮状态 : </div>
                                <Switch
                                    checkedChildren="开启"
                                    unCheckedChildren="关闭"
                                    checked={warningStatus}
                                    onChange={e => WeChatEvent.emit({ warningStatus: e })}
                                />
                            </div>
                            <div>
                                <div>告警按钮名称 : </div>
                                <Input
                                    placeholder="请输入预警名称"
                                    value={warningTitle}
                                    onChange={e => {
                                        WeChatEvent.emit({ warningTitle: e.target.value })
                                    }}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {ImageSelectStatus && Title && SelectData && (
                <SetUpCommonModal
                    title={Title}
                    Off={setFalse}
                    data={SelectData}
                    SetUpCommonModalEvent={SetUpCommonModalEvent}
                />
            )}
        </div>
    )
}

const MenuSetUp = ({ WeChatEvent, data }) => {
    const { theme, MenuList } = data
    const background = WeChatAntdThemeList[theme] || WeChatUIThemeList[theme] || WeChatChinaThemeList[theme]
    const color = colorCount(background) + '%'

    const [MenuSetupStatus, { setTrue, setFalse }] = useBoolean(false)
    const [Title, setTitle] = useState()
    const [SelectData, setSelectData] = useState()

    const SetUpCommonModalEvent = useEventEmitter()
    SetUpCommonModalEvent.useSubscription(val => {
        WeChatEvent.emit({ MenuList: val })
    })

    const deleteMenu = index => {
        MenuList.splice(index, 1)
        WeChatEvent.emit({ MenuList })
        message.success('成功删除菜单')
    }

    const modifyMenu = index => {
        setSelectData({
            type: 'MenuSetup',
            theme: background,
            MenuList,
            index,
        })
        setTitle('修改菜单')
        setTrue()
    }

    return (
        <div className="MenuSetUp">
            <div
                className="AddButton"
                style={{ background, '--hsl': color }}
                onClick={() => {
                    setSelectData({
                        type: 'MenuSetup',
                        theme: background,
                        MenuList,
                    })
                    setTitle('新增菜单')
                    setTrue()
                }}
            >
                新增菜单
            </div>
            <div className="MenuBox">
                {MenuList.length === 0 ? (
                    <Result icon={<SmileOutlined style={{ color: background }} />} title="暂无内容,请添加菜单" />
                ) : (
                    MenuList.map((item, index) => (
                        <div className="MenuList" key={index}>
                            <div className="MenuOptions">
                                <div
                                    style={{ '--color': background, '--hsl': color }}
                                    onClick={() => modifyMenu(index)}
                                >
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    修改
                                </div>
                                <div
                                    style={{ '--color': '#eb261a', '--hsl': colorCount('#eb261a') + '%' }}
                                    onClick={() => deleteMenu(index)}
                                >
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    删除
                                </div>
                            </div>
                            {(() => {
                                const {
                                    smallStatus,
                                    smallStyle,
                                    smallName,
                                    smallEnglish,
                                    smallTheme,
                                    menuStyle,
                                    menuArr,
                                } = item
                                const SmallTitle = SmallTitleList[smallStyle]
                                const MenuStyle = MenuStyleList[menuStyle]
                                return (
                                    <>
                                        {smallStatus && (
                                            <SmallTitle
                                                title={smallName}
                                                english={smallEnglish}
                                                status={smallTheme}
                                                theme={background}
                                            />
                                        )}
                                        <MenuStyle data={menuArr} />
                                    </>
                                )
                            })()}
                        </div>
                    ))
                )}
            </div>

            {MenuSetupStatus && Title && SelectData && (
                <SetUpCommonModal
                    title={Title}
                    Off={setFalse}
                    data={SelectData}
                    SetUpCommonModalEvent={SetUpCommonModalEvent}
                />
            )}
        </div>
    )
}

const TabBarSetUp = ({ WeChatEvent, data }) => {
    const { theme, tabBarType } = data
    const background = WeChatAntdThemeList[theme] || WeChatUIThemeList[theme] || WeChatChinaThemeList[theme]
    return (
        <div className="TabBarSetUp">
            <div className="TabBarType">
                <Divider className="Title" orientation="left">
                    TabBar样式
                </Divider>
                <div className="Box">
                    {WeChatTabBarType.map(({ uuid, title, DOM }) => (
                        <div key={uuid}>
                            <div>{title}</div>
                            {tabBarType === uuid ? (
                                <Ribbon text="当前" color={background}>
                                    <DOM theme={background} />
                                </Ribbon>
                            ) : (
                                <div onClick={() => WeChatEvent.emit({ tabBarType: uuid })}>
                                    <DOM theme={background} />
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            </div>
            {/* <div className="TabBarBox">
                <Divider className="Title" orientation="left">
                    TabBar配置
                </Divider>
                <div className="Box">
                    <div className={tabBarType}>信息内容</div>
                    <div className="TabBarList">
                        {WeChatTabBarList.map(({ uuid, title, icon }) => (
                            <div key={uuid} style={{ '--color': background }}>
                                {ICON[icon]}
                                <span>{title}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div> */}
        </div>
    )
}

export const WeChatHomeSetUp = () => {
    const [Uuid, setUuid] = useState()
    const { runAsync: getSmallProgramConfig } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const [{ uuid, menus }] = res
            setUuid(uuid)
            setTemplateData(JSON.parse(menus))
        },
    })

    const { runAsync: posSmallProgramConfig } = useRequest(Http, {
        manual: true,
        onSuccess: () => {
            message.success('成功保存小程序配置')
        },
    })

    useEffect(() => {
        getSmallProgramConfig({ url: 'getSmallProgramConfig' })
    }, [getSmallProgramConfig])

    const [TemplateData, setTemplateData] = useSetState({
        MainTitle: '主标题',
        SubTitle: '副标题',
        Caption: 'topImage001',
        theme: '明青07',
        tabBarType: 'TabBar002',
        preinstallTitle: '项目概况',
        preinstallEnglish: 'OVERVIEW',
        preinstallPath: 'WeChatPath',
        warningTitle: '预警信息',
        warningStatus: true,
        MenuList: [],
    })

    const WeChatEvent = useEventEmitter()
    WeChatEvent.useSubscription(val => setTemplateData(val))

    return (
        <div className="WeChatHomeSetUp">
            <WeChatPreview data={TemplateData} post={posSmallProgramConfig} uuid={Uuid} />
            <div className="dispose">
                {/*  activeKey="4" */}
                <Collapse accordion>
                    <Panel header="主题设置" key="1">
                        <ThemeSetUp WeChatEvent={WeChatEvent} theme={TemplateData.theme} />
                    </Panel>
                    <Panel header="顶部设置" key="2">
                        <HeadSetUp WeChatEvent={WeChatEvent} data={TemplateData} />
                    </Panel>
                    <Panel header="菜单设置" key="3">
                        <MenuSetUp WeChatEvent={WeChatEvent} data={TemplateData} />
                    </Panel>
                    <Panel header="底部导航" key="4">
                        <TabBarSetUp WeChatEvent={WeChatEvent} data={TemplateData} />
                    </Panel>
                </Collapse>
            </div>
        </div>
    )
}
